<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search">
			<el-input
				class="search-item"
				placeholder="请输入患者名称或医生名称"
				v-model="state.apiData.search"
				size="default"
				style="width: 220px;"
				clearable
			>
			</el-input>

			<el-select
				class="search-item"
				v-model="state.apiData.operationId"
				placeholder="请选择手术名称"
				size="default"
				style="width: 150px;"
				clearable
				v-select-lazy="handleLoadMore"
				:teleported="false"
			>	
				<el-option v-for="(item,index) in state.operationList" :key="index" :label="item.name" :value="item.id"></el-option>
			</el-select>

			<el-select
				class="search-item"
				v-model="state.apiData.status"
				placeholder="请选择患者状态"
				size="default"
				style="width: 150px;"
				clearable
			>	
				<el-option v-for="(item,index) in state.statusList" :key="index" :label="item.text" :value="item.value"></el-option>
			</el-select>

			<el-button size="default"  type="primary" @click="searchChange()" :icon="Search">查询</el-button>
			<el-button size="default"  type="default" @click="resetSearch()" :icon="RefreshRight">重置</el-button>
			
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;" >
			
				<div class="output-box">
					<el-button size="default" type="primary" style="width: 100px;">
						导出
					</el-button>
				</div>
				
				<el-table :data="state.tableData.data"  border   style="width: 100%" :height="state.tableHeight" ref="multipleTableRef" @selection-change="handleSelectionChange"   >
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column prop="patient.name" label="患者姓名" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="preDiagnosis" label="诊断" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column label="主刀医生" width="100" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.chiefDoctor? scope.row.operation.chiefDoctor.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="手术"  show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operation && scope.row.operation.operation? scope.row.operation.operation.name : '-' }}
						</template>
					</el-table-column>
					<el-table-column prop="visitingDoctor.name" label="准入负责人" show-overflow-tooltip align="center" width="120"></el-table-column>
					<el-table-column  label="准入评估报告" show-overflow-tooltip align="center" width="120">
						<template #default="scope">
							<el-button  size="small" link type="primary" @click="goDetail(scope.row.patient_id)">查看留档</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="患者状态" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ state.statusObj[scope.row.status] }}
						</template>
					</el-table-column>
					<el-table-column prop="createdAt" label="准入时间" width="170" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column label="操作" width="100" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" link type="primary" :icon="More"></el-button>
						</template>
					</el-table-column>
				</el-table>

				
				<div class="pagination-box">
					<el-pagination
						@size-change="onHandleSizeChange"
						@current-change="onHandleCurrentChange"
						class="mt15"
						:pager-count="5"
						:page-sizes="[10, 20, 30]"
						v-model:current-page="state.apiData.page"
						background
						v-model:page-size="state.apiData.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total"
					>
					</el-pagination>
				</div>
				
			</el-card>
		</div>

		
	</div>
</template>

<script setup name="entryAndExit-patientEntry-index">
import { getCurrentInstance } from 'vue';
import { toolsApi } from '/@/api/tools'
import { entryAndExitApi } from '/@/api/entryAndExit'
import { transListToObj } from '/@/utils/arrayOperation'
import { useLocalPage } from '/@/hook/useLocalPage'
import {
 More,
 Search,
 RefreshRight,
} from '@element-plus/icons-vue'
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

const { getLocalData, setLocalData } = useLocalPage()


// 定义变量内容
const state = reactive({
	apiData: {
		page: 1,
		pageSize: 10,
		operationId: '',
		search: '',
		status: ''
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	operationList: [],
	statusList: [],
	statusObj: {}
});

// 页面加载时
onMounted(() => {
	getList()
	getOperationList()
	getPatientStatus()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight  - 130 - 52 + "px";
});

// 手术下拉
const getOperationList = () => {
  toolsApi().operationList().then(res => {
    // state.operationList = res.data
	setLocalData(res.data)
	state.operationList = getLocalData(100)
	
  }).catch(() => {
  })
}

const handleLoadMore = ()=>{
	state.operationList = state.operationList.concat(getLocalData(100))
}

const getPatientStatus = () => {
	toolsApi().patientStatus().then(res => {
		state.statusList = res.data
		state.statusObj = transListToObj(res.data,'value','text')
	})
}

const searchChange = () =>{
	state.apiData.page = 1
	getList()
}

const resetSearch = () => {
	state.apiData = {
		page: 1,
		pageSize: 10,
		operationId: '',
		search: '',
		status: ''
	},
	getList()
}




const handleSelectionChange = () => {

}




// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.pageSize = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};







// 获取列表
const getList = () => {
	state.tableData.loading = true
	entryAndExitApi().patientAccessList(state.apiData).then(res=>{
		state.tableData.loading = false
		state.tableData.data = res.data.items
		state.tableData.total = res.data.total
	}).catch(() =>{
		state.tableData.loading = false
	})

	
}

// 患者详情
const goDetail = (id) => {

}
</script>

<style lang="scss" scoped>

.page-main{
	height: calc(100vh - 50px - 106px);
}




.output-box{
	margin-bottom: 20px;
}



</style>
